<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Otter-Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- <link rel="stylesheet" href="./weui.css"/>
    <link rel="stylesheet" href="./example.css"/>  -->

</head>
<body>
    
<div id="app" class="page">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="500">
    <polyline points="550,550 0,120 120,120 120,140 140,140 140,160" style="fill:none;stroke:yellow;stroke-width:5"/>
        <!-- <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" /> -->
        <g stroke="black" stroke-width="3" fill="black">
            <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <g>
            <rect x="40" y="40" width="260" height="260" style="stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9" fill="blue" stroke="pink" alt="正方形"/>
            <text x="0" y="50" fill="blue" style="font-size:30px; font-family: '微软雅黑';">正方形</text>          
            <circle id="pointA" cx="100" cy="350" r="3" /> 
        </g>
        <rect x="440" y="140" width="160" height="160" style="stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9" fill="blue" stroke="pink" alt="正方形"/>
    </svg>
</div>    

    <!-- <script src="./zepto.min.js"></script>
    <script src="vue.js"></script> -->
    <script src="otter.js"></script>
    <script>
        var ot = new Otter('div');
        ot.setBg("#f00");
    </script>
</body>
</html>